<extend name="./Application/Admin/View/Layout/application.html"/>
<block name="css">
    <link rel="stylesheet" href="__PUBLIC__/assets/admin/css/common.css">
    <link rel="stylesheet" href="__PUBLIC__/vendor/nestable/jquery.nestable.css">
</block>

<block name="content">
    <div class="admin-content" id="app">

        <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">菜单与权限</strong> /
                <small>Menus & Rules</small>
            </div>
        </div>

        <div class="am-g">
            <div class="am-u-sm-12 am-u-md-6">
                <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                        <button type="button" onclick="compress()" class="is_compress am-btn am-btn-secondary">
                            <span class="am-icon-compress"></span> 折叠
                        </button>
                        <button type="button" onclick="expand()" class="is_expend am-btn am-btn-success">
                            <span class="am-icon-expand"></span> 展开
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <hr>

        <div class="am-g">
            <div class="am-u-lg-6">

                <div class="dd" id="nestable">
                    <ol class="dd-list">
                        <volist name="rules" id="rule">

                            <li class="dd-item dd3-item" data-id="{{$rule.id}}">
                                <div class="dd-handle dd3-handle">Drag</div>
                                <div class="dd3-content">
                                    <span class="{{$rule.icon}}"></span> {{$rule.title}} ({{$rule.name}})
                                    <div class="pull-right action-buttons">
                                        <a href="javascript:;" id="add_parent" data-parent-title="{{$rule.title}}"
                                           data-am-popover="{theme: 'secondary sm', content: '新增', trigger: 'hover'}"><i
                                                class="am-icon-plus add_menu"></i></a>
                                        <a href="{{:U('edit_rule',array('id'=>$rule[id]))}}"
                                           data-am-popover="{theme: 'success sm', content: '编辑', trigger: 'hover'}"><i
                                                class="am-icon-pencil"></i></a>
                                        <a href="javascript:;"
                                           data-am-popover="{theme: 'danger sm', content: '删除', trigger: 'hover'}"><i
                                                class="am-icon-trash del_rule"></i></a>
                                    </div>
                                </div>

                                <ol class="dd-list dd-hide" data-start-collapsed="true">
                                    <volist name="rule['children']" id="children">

                                        <li class="dd-item dd3-item" data-id="{{$children.id}}">
                                            <div class="dd-handle dd3-handle">Drag</div>
                                            <div class="dd3-content">
                                                <span class="{{$children.icon}}"></span> {{$children.title}}
                                                ({{$children.name}})
                                                <div class="pull-right action-buttons">
                                                    <a href="javascript:;"
                                                       data-am-popover="{theme: 'secondary sm', content: '新增', trigger: 'hover'}"><i
                                                            class="am-icon-plus"></i></a>
                                                    <a href="{{:U('edit_rule',array('id'=>$children[id]))}}"
                                                       class="editMenu"
                                                       data-am-popover="{theme: 'success sm', content: '编辑', trigger: 'hover'}"><i
                                                            class="am-icon-pencil"></i></a>
                                                    <a href="javascript:;"
                                                       data-am-popover="{theme: 'danger sm', content: '删除', trigger: 'hover'}"><i
                                                            class="am-icon-trash del_rule"></i></a>
                                                </div>
                                            </div>

                                            <ol class="dd-list dd-hide" data-start-collapsed="true">
                                                <volist name="children['child']" id="child">
                                                    <li class="dd-item dd3-item" data-id="{{$child.id}}">
                                                        <div class="dd-handle dd3-handle">Drag</div>
                                                        <div class="dd3-content">
                                                            {{$child.title}} ({{$child.name}})
                                                            <div class="pull-right action-buttons">
                                                                <a href="{{:U('edit_rule',array('id'=>$child[id]))}}"
                                                                   data-am-popover="{theme: 'success sm', content: '编辑', trigger: 'hover'}"><i
                                                                        class="am-icon-pencil"></i></a>
                                                                <a href="javascript:;"
                                                                   data-am-popover="{theme: 'danger sm', content: '删除', trigger: 'hover'}"><i
                                                                        class="am-icon-trash del_rule"></i></a>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </volist>
                                            </ol>
                                        </li>
                                    </volist>
                                </ol>
                            </li>
                        </volist>
                    </ol>
                </div>
            </div>

            <div class="am-u-lg-6">
                <div class="am-panel am-panel-default">
                    <div class="am-panel-bd ">
                        <form class="am-form" data-am-validator>
                            <div id="_method"></div>
                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-3 am-text-right">
                                    上级菜单
                                </div>
                                <div class="am-u-sm-8 am-u-md-9 am-u-end col-end">
                                    <select name="parent_id" id="parent_id">
                                        <option value="0">顶级菜单</option>
                                        <volist name="rules" id="rule">

                                            <option value="{{$rule.id}}">
                                                {{$rule.title}}

                                                <volist name="rule['children']" id="children">
                                            <option value="{{$children.id}}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|--{{$children.title}}</option>
                                        </volist>
                                        </option>
                                        </volist>

                                    </select>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-3 am-text-right">
                                    图标
                                </div>
                                <div class="am-u-sm-8 am-u-md-9">
                                    <div class="am-form-group am-form-icon">
                                        <i class="permission.icon"></i>
                                        <input type="text" class="am-form-field am-input-sm" id="icon"
                                               placeholder="请输入图标的class">
                                    </div>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-3 am-text-right">
                                    菜单名称
                                </div>
                                <div class="am-u-sm-8 am-u-md-9">
                                    <input type="text" class="am-input-sm" id="title" placeholder="请输入菜单名称" required>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-3 am-text-right">
                                    权限名称
                                </div>
                                <div class="am-u-sm-8 am-u-md-9">
                                    <textarea rows="4" id="name" placeholder="请输入权限名称" required></textarea>
                                </div>
                            </div>

                            <div class="am-margin">
                                <button type="submit" class="am-btn am-btn-primary am-radius submit">保 存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div role="dialog" class="modal fade" id="layer">

        </div>
    </div>

</block>
<block name="js">
    <script src="__PUBLIC__/vendor/nestable/jquery.nestable.js"></script>
    <!--<script src="__PUBLIC__/assets/admin/js/bootstrap.min.js"></script>-->
    <script>
        $(function () {
            $('.dd').nestable({
                maxDepth: 3,
            });

            //展开
            $('.is_expend').click(function () {
                $('.dd').nestable('expandAll');
            })
//            function expand() {
//
//
//            }

            //折叠
            $('.is_compress').click(function () {
                $('.dd').nestable('collapseAll');
            })
//            function compress() {
//
//            }
//            $('.dd-handle').click(function () {
//                $('.dd').nestable('dragMove');
//            })
//            $('.dd-handle').on('change', function() {
//                $('.dd').nestable('dragMove');
//            });


            //新增菜单
            $('.submit').click(function () {
                var info = {
                    parent_id: $('#parent_id').val(),
                    icon: $('#icon').val(),
                    title: $('#title').val(),
                    name: $('#name').val()
                }
                $.ajax({
                    type: 'post',
                    url: "{{:U('add_rule')}}",
                    data: info,
                    success: function (face) {
                        if (face.status == 1) {
                            alert(face.msg);
                            location.href = "{{:U('rule_manage')}}"
                        } else {
                            alert(face.msg);
                            return false;
                        }
                    }
                })
//                console.log(info);
                return false;
            })
            //删除一级权限菜单
            $('.del_rule').click(function () {
                var id = $(this).parents('li').data('id');
                $.ajax({
                    type: 'post',
                    url: "{{:U('delete_rule')}}",
                    data: {id: id},
                    success: function (info) {
                        if (info.status == 1) {
                            alert(info.msg);
                            $("li[data-id='" + id + "']").fadeOut(400);
                        } else {
                            alert(info.msg)
                            return false;
                        }

                    }
                })
                return false;
            })
            //删除二级菜单
//            $('.del_children').click(function () {
//                var _this = $(this)
//                var id = $(this).parents('li').data('id')
//                $.ajax({
//                    type: 'post',
//                    url: "{{:U('delete_children')}}",
//                    data: {id: id},
//                    success: function (info) {
//                        if (info.status == 1) {
//                            alert(info.msg);
//                            $("li[data-id='" + id + "']").fadeOut(400);
//                        } else {
//                            alert(info.msg);
//                            return false;
//                        }
//                    }
//                })
//                return false;
//            })

        })
    </script>
</block>